<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《原神》</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3207635_pfnt4rv7w1d.css">
    <link rel="shortcut icon" href="./asset/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/plac.css">
    <link rel="stylesheet" href="./css/news.css">
    <link rel="stylesheet" href="./css/city.css">
    <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <nav class="header-left">
            <!-- 音乐图片 -->
            <div class="header-music"></div>
            <!-- <audio class="header-audio" src="./asset/bgm-music.mp3" loop autoplay></audio>
            <audio class="header-audio" src="./asset/bgm-wind.mp3" loop autoplay></audio> -->
            <!-- logo -->
            <a href="" class="header-logo">
                <h1>原神</h1>
            </a>
            <!-- 菜单栏 -->
            <div class="header-menu">
                <a href="" class="active">首页</a>
                <a href="">新闻</a>
                <a href="">角色</a>
                <a href="">世界</a>
                <a href="">漫画</a>
                <a href="">社区</a>
                <div class="headerw-menu-bar"></div>
            </div>
        </nav>
        <nav class="header-right">
            <div class="header-carefor">
                <span>成长关爱系统</span>
            </div>
            <div class="header-sign">
                <span>登录</span>
            </div>
        </nav>
    </div>
    <!-- 海报 -->
    <div class="poster">
        <video class="poster-video" src="./asset/video.mp4" muted loop autoplay></video>
        <img class="poster-badge" src="./asset/badge.png" alt="">
        <div class="poster-arrows">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="download">
            <div class="qrcode">
                <img src="./asset/d-qrcode.png" alt="">
                <img src="./asset/d-qrcode.jpeg" alt="">
            </div>
            <div class="equip">
                <a href="">
                    <img src="./asset/d-ps.png" alt="">
                    <img src="./asset/d-ps-modal.png" alt="">
                </a>
                <a href="">
                    <img src="./asset/d-ios.png" alt="">
                    <img src="./asset/d-ios-modal.png" alt="">
                </a>
            </div>
            <div class="equip">
                <a href="">
                    <img src="./asset/d-tap.png" alt="">
                    <img src="./asset/d-tap-modal.png" alt="">
                </a>
                <a href="">
                    <img src="./asset/d-android.png" alt="">
                    <img src="./asset/d-android-modal.png" alt="">
                </a>
            </div>
            <a href="" class="pcd">
                <img src="./asset/d-pc.png" alt="">
                <img src="./asset/d-pc-modal.png" alt="">
            </a>
        </div>
        <div class="cast">
            <div class="btn"></div>
            <!-- <video class="video-1" src="./asset/video-1.mp4" controls></video> -->
        </div>
    </div>
    <!-- 新闻 -->
    <div class="news">
        <h2 class="news-title">
            <span>新闻资讯</span>
        </h2>
        <!-- 新闻主区域 -->
        <div class="news-main">
            <!-- 轮播图区域 -->
            <div class="news-banner">
                <!-- 图片区域 -->
                <div class="news-banner-img">
                    <a href="">
                        <img src="./asset/banner1.jpg" alt="" />
                    </a>
                    <a href="">
                        <img src="./asset/banner2.jpg" alt="" />
                    </a>
                    <a href="">
                        <img src="./asset/banner3.jpg" alt="" />
                    </a>
                    <a href="">
                        <img src="./asset/banner4.jpg" alt="" />
                    </a>
                </div>
                <!-- 指示器区域 -->
                <div class="news-banner-indicator">
                    <div class="active"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <!-- 新闻区域 -->
            <div class="news-container">
                <!-- 新闻选项卡区域 -->
                <div class="news-tab">
                    <span class="active">最新</span>
                    <span>新闻</span>
                    <span>公告</span>
                    <span>活动</span>
                </div>
                <!-- 新闻列表区域 -->
                <div class="news-list">
                    <a href="">
                        <h2>《原神》「三界路飨祭」玩法说明</h2>
                        <span>2022/02/16</span>
                    </a>
                    <a href="">
                        <h2>《原神》微博超话2.5版本第一期签到活动现已上线</h2>
                        <span>2022/02/16</span>
                    </a>
                    <a href="">
                        <h2>《原神》「神铸赋形」活动祈愿现已开启</h2>
                        <span>2022/02/16</span>
                    </a>
                    <a href="">
                        <h2>《原神》「华紫樱绯」活动祈愿现已开启</h2>
                        <span>2022/02/16</span>
                    </a>
                    <a href="">
                        <h2>《原神》2.5版本「薄樱初绽时」更新通知</h2>
                        <span>2022/02/16</span>
                    </a>
                </div>
                <!-- 更多 -->
                <a href="" class="news-more">查看全部资讯</a>
            </div>
        </div>
    </div>
    <!-- 城市 -->
    <div class="city">
        <a href="" class="city-p1">
            <img src="./asset/city1.jpg" alt="" class="city-img" />
            <img src="./asset/h1.png" alt="" class="city-char" />
            <h2>蒙德城</h2>
        </a>
        <a href="" class="city-p1">
            <img src="./asset/city2.jpg" alt="" class="city-img" />
            <img src="./asset/h2.png" alt="" class="city-char" />
            <h2>璃月港</h2>
        </a>
        <a href="" class="city-p1">
            <img src="./asset/city3.jpg" alt="" class="city-img" />
            <img src="./asset/h3.png" alt="" class="city-char" />
            <h2>稻妻城</h2>
        </a>
        <a href="" class="city-p1">
            <img src="./asset/city4.jpg" alt="" class="city-img" />
            <img src="./asset/h4.jpg" alt="" class="city-char" />
            <h2>至冬国</h2>
        </a>
        <div class="city-more">
            <h2>敬请期待</h2>
            <img src="./asset/wait.jpg" alt="">
        </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <div class="footer-contact">
            <a href=""><span class="iconfont icon-weibo"></span></a>
            <a href=""><span class="iconfont icon-weixin"></span></a>
            <a href=""><span class="iconfont icon-QQ"></span></a>
            <a href=""><span class="iconfont icon-JC_054"></span></a>
        </div>
        <div class="footer-main">
            <div class="footer-container">
                <img src="./asset/corp-logo.png" class="footer-corp-logo" alt="">
                <div class="footer-split"></div>
                <img src="./asset/game-logo.png" class="footer-game-logo" alt="">
                <div class="footer-content">
                    <div class="footer-links">
                        <a href="">用户协议</a>
                        <a href="">隐私政策</a>
                        <a href="">儿童隐私政策</a>
                        <a href="">自律公约</a>
                        <a href="">家长监护工程</a>
                        <a href="">关于我们</a>
                        <a href="">联系我们</a>
                        <a href="">加入我们</a>
                    </div>
                    <div class="footer-info">
                        <p>
                            健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                        </p>
                        <p>
                            <a href="">沪公网安备31010402001113号</a> | 增值电信业务经营许可证：沪B2-20190555
                        </p>
                        <p>
                            <a href="">沪ICP备19018275号-4</a> | 沪网文〔2019〕3168-216号 | 国新出审【2019】2978号
                        </p>
                        <p>
                            互联网违法不良信息举报邮箱: tousu@mihoyo.com 互联网违法不良信息举报电话: 021-60371750 （工作时间：每天10点 - 20点）
                        </p>
                        <p>
                            亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听
                        </p>
                        <p>未成年成长关爱热线：021-60371740</p>
                        <p>
                            © 2020 米哈游版权所有 | 上海米哈游影铁科技有限公司 客服电话：400-666-6312
                        </p>
                    </div>
                    <div class="footer-icon">
                        <a href="">
                            <img src="./asset/footer-icon1.png" alt="" />
                        </a>
                        <a href="">
                            <img src="./asset/footer-icon2.png" alt="" />
                        </a>
                        <a href="">
                            <img src="./asset/footer-icon3.png" alt="" />
                        </a>
                        <a href="">
                            <img src="./asset/footer-icon4.png" alt="" />
                        </a>
                        <a href="">
                            <img src="./asset/footer-icon5.png" alt="" />
                        </a>
                        <a href="">
                            <img src="./asset/footer-icon6.png" alt="" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>

</html>